<template>
  <div id="deviceEdit" v-loading="isLoging">
    <el-dialog
      title="设备布防"
      width="40%"
      top="2rem"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :destroy-on-close="true"
      @close="close()"
    >
      <div id="shared" style="margin-top: 1rem;margin-right: 100px;">
        <el-form ref="form"  :model="form" label-width="200px" >
          <el-form-item label="设备编号" prop="deviceId">
            <el-input v-model="form.deviceId" disabled></el-input>
          </el-form-item>
          <el-form-item label="布防类型" prop="type">
            <el-select v-model="form.type" style="float: left; width: 100%">
              <el-option key="0" label="不启用" :value="0"></el-option>
              <el-option key="1" label="计算进入人数" :value="1"></el-option>
              <el-option key="2" label="计算离开人数" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拍摄时间" prop="type" v-if="form.type !=0">
            <el-input-number v-model="form.second" :min="5" :max="60" style="float: left;"></el-input-number>秒
          </el-form-item>
          <el-form-item label="是否关联拍摄" prop="relevance" v-if="form.type !=0">
            <el-select v-model="form.relevance" style="float: left; width: 100%">
              <el-option key="0" label="不关联" :value="0"></el-option>
              <el-option key="1" label="关联设备" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联设备编号" prop="relevanceDeviceId" v-if="form.type !=0 && form.relevance !=0">
            <el-input v-model="form.relevanceDeviceId"></el-input>
          </el-form-item>
          <el-form-item label="关联通道编号" prop="relevanceChannelId" v-if="form.type !=0 && form.relevance !=0">
            <el-input v-model="form.relevanceChannelId"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="float: right;">
              <el-button type="primary" @click="onSubmit" >确认</el-button>
              <el-button @click="close">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "deviceEdit",
  props: {},
  computed: {},
  created() {},
  data() {
    return {
      listChangeCallback: null,
      showDialog: false,
      isLoging: false,
      mediaServerList: [], // 滅体节点列表
      form: {},
    };
  },
  methods: {
    openDialog: function (row, callback) {
      this.showDialog = true;
      this.form = {};
      this.listChangeCallback = callback;
      if (row != null) {
        this.form = row;
      }
    },
    onSubmit: function () {
      if(this.form.type !=0 && this.form.relevance !=0){
        if(this.form.relevanceDeviceId.trim().replace(/\s/g, "") ==null || this.form.relevanceDeviceId.trim().replace(/\s/g, "") ==''){
          this.$message.error('关联设备编号不能为空');
          return;
        }
        if(this.form.relevanceChannelId.trim().replace(/\s/g, "") ==null || this.form.relevanceChannelId.trim().replace(/\s/g, "") ==''){
          this.$message.error('关联通道编号不能为空');
          return;
        }
      }
      this.$axios({
        method: 'post',
        url:`/api/device/control/guard`,
        params: this.form
      }).then((res) => {
        console.log(res.data)
        if (res.data.code === 0) {
          this.listChangeCallback()
        }else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      }).catch(function (error) {
        console.log(error);
      });
    },
    close: function () {
      this.showDialog = false;
      this.$refs.form.resetFields();
    },
  },
};
</script>
